<template>
  <base-modal
    v-model:visible="modalVisible"
    :color="color"
    :width="width"
    :custom="custom"
    :padding="padding"
    :radius="radius"
    @close="handleClose"
  >
    <view class="good-detail-modal">
      <view class="cover">
        <view class="btn-group">
          <image src="/static/images/menu/close.png" @tap="handleClose"></image>
        </view>
      </view>
      <scroll-view class="detail" scroll-y>
        <view v-if="good.image" class="image">
          <image :src="good.image"></image>
        </view>

        <view class="wrapper">
          <view class="basic">
            <view class="name">{{ good.storeName }}</view>
          </view>
          <view class="properties">
            <view class="property" v-for="(item, index) in good.productAttr" :key="index">
              <view class="title">
                <text class="name">{{ item.attrName }}</text>
              </view>
              <view class="values">
                <view class="value" v-for="(value, key) in item.attrValueArr" :key="key"
                  :class="{ default: value == newValue[index] }"
                  @tap="handlePropertyChange(index, key)">
                  {{ value }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="action">
        <view class="left">
          <view class="price">￥{{ good.price }}</view>
          <view class="props">
            {{ good.valueStr }}
          </view>
        </view>
        <view class="btn-group">
          <button type="default" class="btn" size="min" hover-class="none"
            @tap="handlePropertyReduce">
            <view class="iconfont iconsami-select"></view>
          </button>
          <view class="number">{{ good.number }}</view>
          <button type="primary" class="btn" size="min" hover-class="none" @tap="handlePropertyAdd">
            <view class="iconfont iconadd-select"></view>
          </button>
        </view>
      </view>
      <view class="add-to-cart-btn" @tap="handleAddToCart">
        <view>加入购物车</view>
      </view>
    </view>
  </base-modal>
</template>

<script setup>
import { ref, watch } from 'vue'
import BaseModal from '../base-modal/base-modal.vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  good: {
    type: Object,
    default: () => ({})
  },
  category: {
    type: Object,
    default: () => ({})
  },
  color: {
    type: String,
    default: '#5A5B5C'
  },
  width: {
    type: String,
    default: '90%'
  },
  custom: {
    type: Boolean,
    default: true
  },
  padding: {
    type: String,
    default: '0rpx'
  },
  radius: {
    type: String,
    default: '12rpx'
  }
})

const emit = defineEmits(['update:visible', 'close', 'addToCart'])

const modalVisible = ref(false)
const newValue = ref([])

// 监听visible属性变化
watch(() => props.visible, (val) => {
  modalVisible.value = val
})

// 监听modalVisible变化
watch(() => modalVisible.value, (val) => {
  emit('update:visible', val)
})

// 监听商品变化
watch(() => props.good, (newVal) => {
  if (newVal) {
    newValue.value = []
  }
}, { deep: true })

// 关闭模态框
const handleClose = () => {
  modalVisible.value = false
  emit('close')
}

// 属性选择
const handlePropertyChange = (index, key) => {
  newValue.value[index] = props.good.productAttr[index].attrValueArr[key]
}

// 数量减少
const handlePropertyReduce = () => {
  if (props.good.number > 1) {
    props.good.number--
  }
}

// 数量增加
const handlePropertyAdd = () => {
  props.good.number++
}

// 加入购物车
const handleAddToCart = () => {
  emit('addToCart', {
    good: props.good,
    category: props.category,
    number: props.good.number
  })
}
</script>

<style lang="scss" scoped>
.good-detail-modal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .cover {
    height: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn-group {
      position: absolute;
      right: 10rpx;
      top: 0rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      z-index: 210;

      image {
        width: 80rpx;
        height: 80rpx;
      }
    }
  }

  .detail {
    width: 100%;
    min-height: 1vh;
    max-height: calc(90vh - 320rpx - 80rpx - 120rpx);
    position: relative;

    .image {
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 260rpx;
        height: 260rpx;
      }
    }

    .wrapper {
      width: 100%;
      height: 100%;
      overflow: hidden;

      .basic {
        padding: 0 20rpx 30rpx;
        display: flex;
        flex-direction: column;

        .name {
          font-size: $font-size-base;
          color: $text-color-base;
          margin-bottom: 10rpx;
        }
      }

      .properties {
        width: 100%;
        border-top: 2rpx solid $bg-color-grey;
        padding: 10rpx 30rpx 0;
        display: flex;
        flex-direction: column;

        .property {
          width: 100%;
          display: flex;
          flex-direction: column;
          margin-bottom: 30rpx;
          padding-bottom: -16rpx;

          .title {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 20rpx;

            .name {
              font-size: 26rpx;
              color: $text-color-base;
              margin-right: 20rpx;
            }
          }

          .values {
            width: 100%;
            display: flex;
            flex-wrap: wrap;

            .value {
              border-radius: 8rpx;
              background-color: $bg-color-grey;
              padding: 16rpx 30rpx;
              font-size: 26rpx;
              color: $text-color-assist;
              margin-right: 16rpx;
              margin-bottom: 16rpx;

              &.default {
                background-color: $color-primary;
                color: $text-color-white;
              }
            }
          }
        }
      }
    }
  }

  .action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: $bg-color-grey;
    height: 120rpx;
    padding: 0 26rpx;

    .left {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-right: 20rpx;
      overflow: hidden;

      .price {
        font-size: $font-size-lg;
        color: $text-color-base;
      }

      .props {
        color: $text-color-assist;
        font-size: 24rpx;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .btn-group {
      display: flex;
      align-items: center;
      justify-content: space-around;

      .number {
        font-size: $font-size-base;
        width: 44rpx;
        height: 44rpx;
        line-height: 44rpx;
        text-align: center;
      }

      .btn {
        padding: 0;
        font-size: $font-size-base;
        width: 44rpx;
        height: 44rpx;
        line-height: 44rpx;
        border-radius: 100%;
      }
    }
  }

  .add-to-cart-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $color-primary;
    color: $text-color-white;
    font-size: $font-size-base;
    height: 80rpx;
    border-radius: 0 0 12rpx 12rpx;
  }
}
</style> 